<template>
    <div class="top">
        <h3><span>丨</span>添加采收记录</h3>
        <div style="text-align:right;margin-top:20px;">
            <el-button @click="backHandler" class="back">返回</el-button>
        </div>
    </div>
    <el-form v-model="visible" title="添加采收记录">
        <el-form :model="formData1" ref="form" :rules="rules">
            <h3><span>丨</span>基础采收信息</h3>
            <el-form-item label="记录采收地块" :label-width="120" prop="rc">
                <el-select v-model="formData1.rc" placeholder="请选择块地">
                    <el-option label="1号块地" value="1号块地"></el-option>
                    <el-option label="2号块地" value="2号块地"></el-option>
                    <el-option label="3号块地" value="3号块地"></el-option>
                    <el-option label="4号块地" value="4号块地"></el-option>
                    <el-option label="5号块地" value="5号块地"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="记录采收作物" :label-width="120" prop="rd">
                <el-select v-model="formData1.rd" placeholder="请选择作物">
                    <el-option label="小麦" value="小麦"></el-option>
                    <el-option label="玉米" value="玉米"></el-option>
                    <el-option label="水稻" value="水稻"></el-option>
                    <el-option label="大豆" value="大豆"></el-option>
                    <el-option label="棉花" value="棉花"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="采收人" :label-width="120" prop="realname">
                <el-input v-model="formData1.realname" placeholder="如张三李四等" />
            </el-form-item>
            <el-form-item label="记录采收时间" :label-width="120" prop="rb">
                <el-date-picker v-model="formData1.rb" type="datetime" placeholder="请选择日期时间" />
            </el-form-item>
            <h3><span>丨</span>采收量</h3>
            <el-form-item label="记录采收量" :label-width="120" prop="re">
                <el-input v-model="formData1.re" placeholder="如5478公斤" />
            </el-form-item>
            <h3><span>丨</span>其他信息</h3>
            <el-form-item label="记录采收批次" :label-width="120" prop="ra">
                <el-input v-model="formData1.ra" placeholder="如2019040001，2019040002等" />
            </el-form-item>
        </el-form>
    </el-form>
    <div class="btn">
        <el-button @click="resetHandler">重置</el-button>
        <el-button type="primary" @click="submitHandler">添加</el-button>
    </div>
</template>

<script lang='ts' setup>
import type { IUserTableItem1 } from '@/interfaces/IUser';
import { ref, reactive } from 'vue';
import type { Ref } from 'vue';
import { inject } from 'vue';
import { useNewOrdersStore } from '@/stores/NewOrdersStore';
import { useMainStore } from '@/stores/MainStore';
import { useRouter } from 'vue-router';
const mainStore = useMainStore();
const router = useRouter();
const newOrdersStore = useNewOrdersStore();
const emits = defineEmits(['adduser'])
const form = ref();
const visible: Ref<boolean> = ref(true)
const rules = {
    rc: [{ required: true, message: '请选择采收地块', trigger: 'change' }],
    rd: [{ required: true, message: '请选择采收作物', trigger: 'change' }],
    realname: [
        { required: true, message: '请输入采收人', trigger: 'blur' },
        { pattern: /^[\u4e00-\u9fa5]{2,5}$/, message: '姓名必须为2-5个汉字', trigger: 'blur' }
    ],
    rb: [{ required: true, message: '请选择采收时间', trigger: 'change' }],
    re: [
        { required: true, message: '请输入计划采收量', trigger: 'blur' },
        { pattern: /^\d{4}公斤$/, message: '格式必须为4位数字+公斤，如5478公斤', trigger: 'blur' }
    ],
    ra: [
        { required: true, message: '请输入采收计划批次', trigger: 'blur' },
        { pattern: /^201904\d{4}$/, message: '格式必须为2019040001，2019040002等', trigger: 'blur' }
    ],
};
const originFormData1 = {
    id: null,
    realname: '',
    ra: null,
    rb: '',
    rc: '',
    rd: '',
    re: '',
}
const formData1 = reactive({ ...originFormData1 })
const props = defineProps<{ recordData: IUserTableItem1[] }>()
const resetHandler = () => {
    console.log(form.value)
    if (!form.value) return

    form.value.resetFields()
}
const currentView = inject('currentView');
const submitHandler = () => {
    form.value.validate((valid: boolean) => {
    if (!valid) return;
    // .........
    if (typeof formData1.rb !== 'string') {
        const date = formData1.rb as Date;
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hour = String(date.getHours()).padStart(2, '0');
        const minute = String(date.getMinutes()).padStart(2, '0');
        formData1.rb = `${year}.${month}.${day} ${hour}:${minute}`;
    }
    console.log(formData1)
    visible.value = false
    formData1.id = Date.now();

    newOrdersStore.xs = true;
       router.push('/orders');
    if (currentView && typeof currentView === 'object' && 'value' in currentView) {
            currentView.value = 'recordlist';
        }
  });
    
}

const backHandler = () => {
    if (currentView && typeof currentView === 'object' && 'value' in currentView) {
        // currentView.value = 'planlist';
         newOrdersStore.xs = true;
         router.push('/orders');
    }
}
</script>

<style lang='scss' scoped>
.el-form-item {
    margin: 20px auto;
}

.el-form-item {
    width: 350px;
}

.btn {
    width: 200px;
    margin: 20px auto 0;
}

span {
    color: #52e1dc;
}
.top {
     width: 100%;
    display: flex;
    justify-content: space-between;

    .back {
        background-color: #368B90;
        width: 85px;
        height: 40px;
        border: 0;
        color: white;
    }
}
::v-deep(.el-form-item__label) {
  color: white; // 你想要的颜色
}
h3{
    color: white;
}
</style>
